<template>
  <el-menu :default-active="path"
           class="el-menu-vertical-demo"
           @open="handleOpen"
           @close="handleClose"
           :collapse="isCollapse"
           background-color="#ffd04b"
           text-color=dimgray
           active-text-color="#ffffff"
           style="min-height: 100vh">
    <!--
        min-height: 100vh；设置屏幕百分之百高度
        如果超出了，说明容器上面还有组件，需要减掉上面多了个组件的高度假设60px，使用min-height:calc(100vh - 60px)计算;注意空格。
    -->
    <div class="AsideHeader">
        <span v-show="!isCollapse">
          <i class="el-icon-collection"></i>后台管理系统
        </span>

      <span v-show="isCollapse" style="text-align: center">
           <i class="el-icon-collection"></i>Blogs
        </span>
    </div>

    <!--  二级菜单  -->
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-user-solid"></i>
        <span slot="title">系统管理</span>
      </template>
      <el-menu-item index="/main/user" style="text-align: right" @click="$router.push('/main/user')">
        <i class="el-icon-user"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/main/bvp" style="text-align: right" @click="$router.push('/main/bvp')">
        <i class="el-icon-user-solid"></i>
        <span slot="title">会员管理</span>
      </el-menu-item>
      <el-menu-item index="/main/permission" style="text-align: right" @click="$router.push('/main/permission')">
        <i class="el-icon-s-custom"></i>
        <span slot="title">权限管理</span>
      </el-menu-item>
    </el-submenu>

    <!--  一级菜单  -->
    <el-menu-item index="/main/blog" @click="$router.push('/main/blog')">
      <i class="el-icon-collection"></i>
      <span slot="title">博客管理</span>
    </el-menu-item>

    <el-menu-item index="/main/leaveMessage" @click="$router.push('/main/leaveMessage')">
      <i class="el-icon-message-solid"></i>
      <span slot="title">留言管理</span>
    </el-menu-item>

    <el-menu-item index="/main/news" @click="$router.push('/main/news')">
      <i class="el-icon-data-analysis"></i>
      <span slot="title">公告管理</span>
    </el-menu-item>

  </el-menu>
</template>


<script>
export default {
  name: "AsideComponent",

  data() {
    return {
      path: this.$route.path
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse;  //引入状态集中isCollapse的值
    }
  }
}
</script>


<style scoped>

.el-menu {
  border-right: 0px;
  font-weight: bold;
  width: 60px;
  min-height: 100vh;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100vh;
  text-align: center;
}


.AsideHeader {
  align-items: center;
  height: 60px;
  display: flex;
  justify-content: center;
  color: dimgray;
  font-size: 20px;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}


</style>
